﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="../../Content/js/angular1.2.13.js"></script>
    <title></title>
</head>
<body>
    <form name="signup_form" novalidate ng-submit="signupForm();">
        <fieldset>
            <legend>Signup</legend>
            <div class="row">
                <div class="large-12 columns">
                    <label>Your name</label>
                    <input type="text" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required />
                    <div class="error" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid">
                        <small class="error" ng-show="sigup_form.name.$errror.minlength">Your name is required to be at least 3 characters</small>
                        <small class="error" ng-show="sigup_form.name.$error.maxlength">
                            Your name cannot be longer than 20 characters
                        </small>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="large-12 columns">
                    <label>Your email</label>
                    <input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required />
                    <div class="error" ng-show="signup_form.email.$error.email.$dirty&&signup_form.email.$invalid">
                        <small class="error" ng-show="signup_form.email.$error.required">
                            Your email is required.
                        </small>
                        <small class="error" ng-show="signup_form.email.$error.minlength">
                            Your email is required to be at least 3 charcacters.
                        </small>
                        <small class="error" ng-show="signu_form.email.$error.email">
                            That is not a valid email.Plase input a valid email.
                        </small>
                        <small class="error" ng-show="signup_form.email.$error.maxlength">
                            Your email cannot be longer than 20 characters.
                        </small>
                    </div>
                </div>
            </div>
            <div class="large-12 columns">
                <label>Username</label>
                <input type="text" placeholder="Desired user name" name="username" ng-model="sign_form.username" ng-minlength="3" ng-maxlength="20" ensure-unique="username" required />
                <small class="error" ng-show="sign_form.username.$required">
                    Please input a username.
                </small>
                <small class="error" ng-show="signup_form.username.$error.minlength">
                    Your user is required to be at least 3 chararcters.
                </small>
                <small class="error" ng-show="signup_form.username.$error.maxlength">
                    Your username cannot be longer than 20 characters.
                </small>
                <small class="error" ng-show="signup_form.username.$error.unique">
                    That username is taken,please try another
                </small>
            </div>
            <button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
        </fieldset>

    </form>
    <script>
        angular.module('app', [])
            .directive('ensureUnique', function ($http) {
                return {
                    required: 'ngModel',
                    link: function (scope, ele, attrs, c) {
                        scope.$watch(attrs.ngModel, function (n) {
                            if (!n) {
                                return;
                            }
                            $http({
                                method: 'POST',
                                url: '/api/check/' + attrs.ensureUnique,
                                data: {
                                    filed: attrs.ensureUnique,
                                    value: scope.ngModel
                                }
                            }).success(function (data) {
                                c.$setValidity('unique', data.isUnique);
                            }).error(function (data) {
                                c.$setValidity('unique', false);
                            });
                        })
                    }
                }
            }).directive('ngFocus', [function myfunction() {
                var FOCUS_CLASS = 'ng-focused';
                return {
                    restrict: 'A',
                    reuired: 'ngModel',
                    link: function (scope, element, atts, ctrl) {
                        ctrl.$focoused = false;
                        element.bind('fous', function (evt) {
                            element.addClass(FOCUS_CLASS);
                            scope.$appy(function () {
                                ctrl.$focused = true;
                            });
                        }).bind('blur', function (evt) {
                            element.removeClass(FOCUS_CLASS);
                            scope.$appy(function () {
                                ctrl.$focused = false;
                            });
                        })
                    }
                }
            }])
    </script>
</body>
</html>
